<template>
	<view class="shopIndex">
		<view class="serach">
			<input type="text" placeholder-class="phcolor" value="" v-model="params.search" @input="serachShop" placeholder="输入店铺名搜索" />
		</view>
		<view class="classBox">
			<view class="classitem" v-for="(item,index) in classlist" :key="index" @click="nextPage(item,index)">
				<image :src="shopHost.shop+item.icon" mode="widthFix"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="banner">
			<swiper indicator-dots="true" indicator-color="rgba(255,255,255,1)" indicator-active-color="#E41805" autoplay="true"
			 interval="3000">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<image lazy-load="true" :src="shopHost.car+item.img" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="nearbyMain">
			<view class="title">
				<text class="main-title">附近商家</text>
				<text class="sub-title">优选好店</text>
				<navigator class="link-all" url="/pages/shop/allShopList?classId=1">全部 <text class="iconfontPT iconxiayibu xiayibu"></text></navigator>
			</view>
			<view class="nearbyBox">
				<view class="nearbyItem" v-for="(item,index) in shoplist" :key="index">
					<view class="nearbyItem_img">
						<image :src="item.logo === null || item.logo === '' ? '/static/images/shop_placeholder.png' : `${carHost}${item.logo}`" mode="aspectFill"></image>
					</view>
					<view class="shopInfo" @click="getoInfo(item)">
						<view class="shoptitle">{{item.title}}</view>
						<view class="xj">
							<view class="xjbox">
								<!-- <image :src="'/static/images/xing.png'" mode="widthFix" v-for="(i,idx) in 5" :key="idx"></image> -->
								<Star  :score="xjfommater(item.xj)"/>
								<!-- iconshoucang-weixuanzhong -->
							</view>
						</view>
						<view class="address">
							<view class="u-line-1 address__text">{{item.address}}</view>
							<view>{{item.distance/1000}}km</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<homeTabBar :showstatus="showstatus" />
	</view>
</template>

<script>
	import {
		index
	} from "../apis/shop/api.js"
	import homeTabBar from './home-tab-bar/index.vue';
	import Star from './components/public/star.vue'

	export default {

		data() {
			return {
				params: { //查询参数
					longitude: "",
					latitude: "",
					search: ""
				},
				classlist: [],
				banner: [],
				shoplist: [],
				showstatus:0

			}
		},
		components: {
			Star,
			homeTabBar,
		},
    computed:{
			shopHost(){
				return this.$baseHost.shop
			},
			carHost(){
				return this.$baseHost.car
			},
			xjfommater(xj) {
				return (xj) => {
					return xj== null ? 5 : xj.toFixed(1);
				};
			},
		},
		onShow() {
			this.$store.dispatch("home-tab-bar/setCurrentTabbar", 3);
			this.showstatus=uni.getStorageSync('showSataus');
			this.search();
		},
		onLoad(options) {
			let that = this
			uni.getLocation({
				type: 'wgs84',
				geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				success: function(res) {
					that.params.latitude = res.latitude;
					that.params.longitude = res.longitude;
					that.search();
				},
				fail: function() {
					uni.showToast({
						title: '获取地址失败，将导致部分功能不可用',
						icon: 'none'
					});
				},
			})
		},
		methods: {
			nextPage(item, index) {
				if (item.id == 1 || item.id == 2) {
					uni.navigateTo({

						url: `/pages/shop/allShopList?classId=${item.id}&index=${index}`,
					})
				} else {
					uni.showToast({
						title: '开发中,敬请期待...',
						icon: 'none'
					})
				}
			},
			search() {
				let that = this

				index(that.params).then(res => {
					if (res.code == 200) {
						that.classlist = res.data.class;
						that.shoplist = res.data.shop;
						that.banner = res.data.banner
							// that.shoplist.forEach(item => {
							// 	item.xj = parseInt(item.xj)
							// })
					}
				})
			},
			serachShop() {
				this.search()
			},
			getoInfo(item) {
				uni.navigateTo({
					url: '/pages/shop/shopinfo?store_id=' + item.id + '&latitude=' + this.params.latitude + '&longitude=' + this.params
						.longitude,
				})
			}
		}
	}
</script>

<style lang="less">
	
	.xiayibu {
		font-size: 24rpx;
		margin-left: 10rpx;
	}
	.serach {
		background-color: #E41805;
		padding: 30rpx 0;

		input {
			width: 690rpx;
			height: 80rpx;
			border-radius: 80rpx;
			line-height: 80rpx;
			text-align: left;
			margin: 0 auto;
			padding-left: 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			
			
		}
		.phcolor{
			// text-align: center;
			font-size: 30rpx;
		}
	}


	.banner {
		width: 690rpx;
		height: 200rpx;
		margin: 0 auto;
		margin-top: 40rpx;


		swiper {
			height: 100%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

	}


	.shopIndex {
		padding-bottom: 100rpx;
	}

	.classBox {
		&::after {
			content: "";
			display: block;
			height: 0;
			overflow: hidden;
			clear: both;
		}

		.classitem {
			width: 25%;
			float: left;
			text-align: center;
			margin-top: 24rpx;

			image {
				width: 90rpx;
				display: block;
				margin: 0 auto;
				height: 90rpx;
			}

			text {
				font-size: 26rpx
			}

			;
		}
	}

	.nearbyMain {
		padding: 0 30rpx;
		margin-top: 72rpx;

		.title {
			font-size: 44rpx;
			position: relative;

			text {
				font-size: 24rpx;
				color: #808080;
				margin-left: 12rpx;
				
				&.main-title {
					font-weight: bold;
					font-size: 44rpx;
					color: #191919;
					margin-left: 0;
				}
				
				&.sub-title {
					color: #7F7F7F;
					font-weight: 500;
					font-size: 24rpx;
				}
				
				&.xiayibu {
					font-size: 16rpx;
					line-height: 16rpx;
					position: relative;
					top: -2rpx;
				}
			}
			

			navigator {
				position: absolute;
				right: 0;
				top: 10rpx;
				font-size: 24rpx;
				color: #808080;
				padding: 10rpx 0rpx 10rpx 20rpx;
			}
		}

		.nearbyBox {
			padding-bottom: 100rpx;
			
			.nearbyItem {
				margin-top: 48rpx;

				&::after {
					content: "";
					display: block;
					height: 0;
					overflow: hidden;
					clear: both;
				}

				image {
					width: 144rpx;
					height: 144rpx;
					border-radius: 15rpx;
				}
				
				.nearbyItem_img {
					width: 144rpx;
					height: 144rpx;
					float: left;
				}

				.shopInfo {
					float: left;
					margin-left: 30rpx;
					width: calc(~"100% - 174rpx");
					padding-bottom: 46rpx;
					border-bottom: 1px solid rgba(206,203,203, .5);

					.shoptitle {
						color: #191919;
						font-size: 32rpx;
						font-weight: bold;
					}

					.xj {
						margin: 0 0 18rpx;
						width: 100%;

						&::after {
							content: "";
							display: block;
							height: 0;
							overflow: hidden;
							clear: both;
						}

						.xjbox {
							float: left;

							&::after {
								content: "";
								display: block;
								height: 0;
								overflow: hidden;
								clear: both;
							}

							image {
								width: 24rpx;
								height: 24rpx;
								float: left;
								margin-right: 5rpx;

							}
						}

						text {
							float: right;
							font-size: 24rpx;
							color: #666;
							&.star-txt {
								color: #FBD100;
							}
						}
					}

					.address {
						font-size: 24rpx;
						color: #666;
						display: flex;
						justify-content: space-between;
						&__text{
							padding-right: 30rpx;
						}
					}
				}
			}
		}
	}
</style>
